<template>
	<div class="page-content">
		<div class="goods-list">
			<div class="left-menu">
				<div class="left-btn" @click="goTypeManage">分类管理</div>
				<div :class="typeIndex==index?'active':''" @click="clickType(index)" v-for="(item,index) in typeList"
					:key="index">
					{{item.title}}
				</div>
			</div>
			<div class="right-list">
				<div class="list-item" v-for="(item, idx) in goodsList" :key="idx">
					<image class="img" :src="picServiceUrl+item.showImage" mode="widthFix" v-if="item.showImage" />
					<image class="img" src="/static/def_pic.png" mode="widthFix" v-else />
					<div class="content">
						<div>{{item.title}}</div>
						<div style="color: #f44336">
							￥{{item.original?item.original/100:item.specificationList[0].childs[0].original/100}}</div>
					</div>
					<div class="btn" @tap="edit(item)">编辑</div>
				</div>
			</div>
		</div>
		<div class="bto-felx">
			<div class="btn-info">
				<div class="btn" @tap="edit()">添加商品</div>
			</div>
		</div>
	</div>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				busId: null,
				typeList: null,
				typeIndex: 0,
				goodsList: null,
				picServiceUrl: app.globalData.picServiceUrl,
				memberDiscount: null
			};
		},
		onLoad(e) {
			this.busId = e.id;
			if (e.memberDiscount) {
				this.memberDiscount = e.memberDiscount;
			}
		},
		onShow() {
			this.getType()
		},
		methods: {
			getType() {
				uni.request({
					url: app.globalData.serviceUrl +
						'/UserMiniProgramController/getOfflineBusinessGoodsCategoryList',
					method: 'POST',
					data: {
						offlineBusinessId: this.busId
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data && res.data.data) {
							this.typeList = res.data.data;
							this.getGoods();
						} else {
							this.typeList = [];
						}

					}
				});
			},
			getGoods() {
				uni.request({
					url: app.globalData.serviceUrl +
						'/UserMiniProgramController/getOfflineBusinessGoodsList',
					method: 'POST',
					data: {
						offlineBusinessId: this.busId,
						categoryId: this.typeList ? this.typeList[this.typeIndex].id : 0
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						this.goodsList = res.data.data;
					}
				});
			},
			clickType(index) {
				this.typeIndex = index;
				this.getGoods();
			},
			edit(item) {
				let url = './addGoods/addGoods?id=' + this.busId;
				if (this.memberDiscount) {
					url += '&memberDiscount=' + this.memberDiscount;
				}
				if (item) {
					url += '&goods=' + JSON.stringify(item);
				}
				uni.navigateTo({
					url: url
				});
			},
			goTypeManage() {
				uni.navigateTo({
					url: './addType/addType?id=' + this.busId
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.model-mask {
		opacity: 0.4;
		background-color: rgb(0, 0, 0);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 99;
	}

	.bto-felx {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
		background: #fff;

		.btn-info {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 10px 20px;

			.soping-cart {
				width: 50px;
				height: 50px;
			}

			.count {
				flex: 1 1 0;
				padding-left: 20px;
			}

			.btn {
				padding: 5px 15px;
				background: #333;
				color: #fff;
				border-radius: 5px;
				font-size: 16px;
			}
		}
	}

	.page-content {
		.goods-list {
			display: flex;
			min-height: 500px;

			.left-menu {
				flex: 0 0 85px;
				background: #f6f6f6;
				padding-bottom: 100px;

				div {
					font-size: 14px;
					color: #333;
					text-align: center;
					height: 100px;
					line-height: 100px;
					overflow: hidden;
				}

				.active {
					background: #fff;
					border-left: 3px solid #000;
				}

				.left-btn {
					height: 50px;
					line-height: 50px;
				}
			}

			.right-list {
				flex: 1 1 0;
				overflow-y: scroll;
				height: 700px;
				padding: 10px;
				padding-bottom: 100px;

				.list-item {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 10px;
					padding-bottom: 10px;
					border-bottom: 1px solid #e3e3e3;

					.img {
						width: 80px;
						height: 80px;
						border-radius: 5px;
						flex: 0 0 80px;
					}

					.content {
						flex: 1 1 0;
						padding: 0 10px;
						font-size: 16px;
					}

					.btn {
						padding: 3px 10px;
						background: #333;
						color: #fff;
						border-radius: 5px;
						font-size: 12px;
					}
				}
			}
		}

		.head {
			height: 30px;
			margin: 10px 20px;
			background-color: #f7f7f7;
			display: flex;
			border-radius: 15px;
			align-items: center;
			padding: 0 10px;

			input {
				padding: 0 10px;
				background: none;
				outline: none;
				border: none;
				line-height: 30px;
				flex: 1 1 0;
			}

			img {
				left: 0;
				width: 15px;
				height: 15px;
			}
		}

		.zhuohao {
			padding: 0 20px;
			box-shadow: 0 10px 10px -10px #e2e2e2;
		}
	}
</style>
